<template>
<div class="guding">
<div style="width:500px;margin:100px auto;background-color:rgba(255,255,255,0.9);padding:50px;border-radius: 10px;">

    <div style="font-size:24px;color:#000;">登录</div>
  <el-form
    label-position="top"
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="请输入账号" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="请输入密码" prop="mima">
      <el-input v-model="ruleForm.mima" type="password"></el-input>
    </el-form-item>
    <!-- <el-form-item label="请输入手机验证码" prop="mima" style="display:none;">
      <el-input v-model="ruleForm.mima">
        <template #append>
        <el-button @click="fa_yanzhengma()" >{{str}}</el-button>
      </template>
      </el-input>
    </el-form-item> -->
    
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >登录</el-button>
    </el-form-item>
  </el-form>

  </div>
  </div>
</template>

<script scoped>
import  { isPhone } from '../api/yanzheng.js'
import { ElMessage } from 'element-plus'
import {request} from '../api/request.js'
  export default {
  data() {
    return {
      str:'获取验证码',
      ruleForm: {
        name: '',
        mima: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
          },
        ],
        mima: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
        
      },
    }
  },
  methods: {
    submitForm(formName) {
      var that=this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //验证成功 开始登录
          let url='/g/index/login'
          request(url,
          {name:that.ruleForm.name,mima:that.ruleForm.mima},
          res=>{
            if(res.ing==1){
              //登录成功
              window.sessionStorage.setItem('token',res.data.token)
              window.sessionStorage.setItem('name',res.data.name)
              ElMessage.success(res.msg)
              this.$router.push('/')
            }else{
              ElMessage.error(res.msg)
            }
          },
          err=>{
            ElMessage.error(err.msg)
          }
          )
        } else {
          // ElMessage.error('error submit!!')
          return false
        }
      })
    },
  fa_yanzhengma(){
    if(isPhone(this.ruleForm.mobile)==false){
      // alert('请输入正确的手机号');
      ElMessage.error('请输入正确的手机号')
      return false;
    }
    let url='/g/index/fa_yanzhengma'
 
    request(url,
    {mobile:this.ruleForm.mobile},
    res=>{
      if(res.ing==1){
        ElMessage.error(res.msg)
        return false;
      }
      if(res.ing==0){
        ElMessage.success(res.msg)
        if(this.str=='获取验证码'){
          this.str=180
          this.daojishi()
        }else{
          return false;
        }

      }else{
        ElMessage.error(res.msg)
      }
      
    },err=>{
      ElMessage.error(err.msg)
    })
    
    
  },
  daojishi(){
    if(this.str<=0){
      this.str='获取验证码'
    }
    if(this.str=='获取验证码'){
      return false;
    }
    this.str=parseInt(this.str)-1
    var that=this
    setTimeout(function(){
      that.daojishi()
    },1000)
  }
  }

}
</script>

<style  scoped>
.guding{position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: url(../assets/login_images/background.jpg) center center no-repeat;background-size:cover ;}

</style>
